<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>API测试工具 - 模型订阅系统</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🧪</text></svg>">
</head>
<body>
    <div class="container">
        <!-- 顶部导航 -->
        <header class="header">
            <div class="header-content">
                <div class="logo">
                    <h1>🧪 API测试工具</h1>
                    <p>模型订阅系统 - 接口测试界面</p>
                </div>
                <div class="header-actions">
                    <div class="connection-status" id="connectionStatus">
                        <span class="status-dot"></span>
                        <span class="status-text">检查连接...</span>
                    </div>
                    <button class="btn btn-secondary" id="checkConnectionBtn">🔗 测试连接</button>
                </div>
            </div>
        </header>

        <!-- 导航标签 -->
        <nav class="nav-tabs">
            <button class="nav-tab active" data-tab="quick">⚡ 快速测试</button>
            <button class="nav-tab" data-tab="models">📦 模型API</button>
            <button class="nav-tab" data-tab="subscriptions">🔔 订阅API</button>
            <button class="nav-tab" data-tab="servers">🖥️ 服务器API</button>
            <button class="nav-tab" data-tab="websocket">🔌 WebSocket</button>
            <button class="nav-tab" data-tab="batch">📋 批量操作</button>
        </nav>

        <!-- 快速测试标签页 -->
        <div id="quick-tab" class="tab-content active">
            <div class="section-header">
                <h2>⚡ 快速测试</h2>
                <button class="btn btn-primary" id="runAllQuickTestsBtn">🚀 运行所有测试</button>
            </div>
            
            <div class="test-grid">
                <!-- 基础连接测试 -->
                <div class="test-card">
                    <div class="test-header">
                        <h3>🔗 基础连接测试</h3>
                        <button class="btn btn-sm" id="testBasicConnectionBtn">测试</button>
                    </div>
                    <div class="test-body" id="basicConnectionResult">
                        <div class="test-placeholder">点击测试按钮开始</div>
                    </div>
                </div>

                <!-- 健康检查测试 -->
                <div class="test-card">
                    <div class="test-header">
                        <h3>🏥 健康检查测试</h3>
                        <button class="btn btn-sm" id="testHealthCheckBtn">测试</button>
                    </div>
                    <div class="test-body" id="healthCheckResult">
                        <div class="test-placeholder">点击测试按钮开始</div>
                    </div>
                </div>

                <!-- 模型列表测试 -->
                <div class="test-card">
                    <div class="test-header">
                        <h3>📦 模型列表测试</h3>
                        <button class="btn btn-sm" id="testModelsListBtn">测试</button>
                    </div>
                    <div class="test-body" id="modelsListResult">
                        <div class="test-placeholder">点击测试按钮开始</div>
                    </div>
                </div>

                <!-- 订阅功能测试 -->
                <div class="test-card">
                    <div class="test-header">
                        <h3>🔔 订阅功能测试</h3>
                        <button class="btn btn-sm" id="testSubscriptionFlowBtn">测试</button>
                    </div>
                    <div class="test-body" id="subscriptionFlowResult">
                        <div class="test-placeholder">点击测试按钮开始</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 模型API标签页 -->
        <div id="models-tab" class="tab-content">
            <div class="section-header">
                <h2>📦 模型API测试</h2>
                <button class="btn btn-secondary" id="loadModelApiTestsBtn">🔄 刷新</button>
            </div>
            
            <div class="api-test-container">
                <!-- API端点列表 -->
                <div class="api-endpoints">
                    <h3>API端点</h3>
                    <div class="endpoint-list" id="modelEndpoints">
                        <div class="loading">加载API端点中...</div>
                    </div>
                </div>

                <!-- 测试区域 -->
                <div class="test-area">
                    <h3>测试区域</h3>
                    <div class="test-form" id="modelTestForm">
                        <div class="placeholder">选择左侧API端点开始测试</div>
                    </div>
                </div>

                <!-- 结果区域 -->
                <div class="result-area">
                    <h3>测试结果</h3>
                    <div class="result-content" id="modelTestResult">
                        <div class="placeholder">测试结果将显示在这里</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 订阅API标签页 -->
        <div id="subscriptions-tab" class="tab-content">
            <div class="section-header">
                <h2>🔔 订阅API测试</h2>
                <button class="btn btn-secondary" id="loadSubscriptionApiTestsBtn">🔄 刷新</button>
            </div>
            
            <div class="api-test-container">
                <div class="api-endpoints">
                    <h3>API端点</h3>
                    <div class="endpoint-list" id="subscriptionEndpoints">
                        <div class="loading">加载API端点中...</div>
                    </div>
                </div>

                <div class="test-area">
                    <h3>测试区域</h3>
                    <div class="test-form" id="subscriptionTestForm">
                        <div class="placeholder">选择左侧API端点开始测试</div>
                    </div>
                </div>

                <div class="result-area">
                    <h3>测试结果</h3>
                    <div class="result-content" id="subscriptionTestResult">
                        <div class="placeholder">测试结果将显示在这里</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 服务器API标签页 -->
        <div id="servers-tab" class="tab-content">
            <div class="section-header">
                <h2>🖥️ 服务器API测试</h2>
                <button class="btn btn-secondary" id="loadServerApiTestsBtn">🔄 刷新</button>
            </div>
            
            <div class="api-test-container">
                <div class="api-endpoints">
                    <h3>API端点</h3>
                    <div class="endpoint-list" id="serverEndpoints">
                        <div class="loading">加载API端点中...</div>
                    </div>
                </div>

                <div class="test-area">
                    <h3>测试区域</h3>
                    <div class="test-form" id="serverTestForm">
                        <div class="placeholder">选择左侧API端点开始测试</div>
                    </div>
                </div>

                <div class="result-area">
                    <h3>测试结果</h3>
                    <div class="result-content" id="serverTestResult">
                        <div class="placeholder">测试结果将显示在这里</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- WebSocket标签页 -->
        <div id="websocket-tab" class="tab-content">
            <div class="section-header">
                <h2>🔌 WebSocket测试</h2>
                <div class="section-actions">
                    <button class="btn btn-success" id="connectWebSocketBtn">🔗 连接</button>
                    <button class="btn btn-danger" id="disconnectWebSocketBtn">❌ 断开</button>
                    <button class="btn btn-secondary" id="clearWebSocketLogBtn">🗑️ 清空日志</button>
                </div>
            </div>
            
            <div class="websocket-container">
                <div class="websocket-status" id="websocketStatus">
                    <span class="status-indicator">未连接</span>
                </div>
                
                <div class="websocket-log" id="websocketLog">
                    <div class="log-placeholder">WebSocket日志将显示在这里</div>
                </div>
            </div>
        </div>

        <!-- 批量操作标签页 -->
        <div id="batch-tab" class="tab-content">
            <div class="section-header">
                <h2>📋 批量操作测试</h2>
                <button class="btn btn-primary" id="runBatchTestsBtn">🚀 运行批量测试</button>
            </div>
            
            <div class="batch-test-container" id="batchTestContainer">
                <div class="loading">批量测试功能开发中...</div>
            </div>
        </div>
    </div>

    <!-- 通知容器 -->
    <div id="notificationContainer" class="notification-container"></div>

    <!-- 脚本文件 -->
    <script src="scripts.js"></script>
</body>
</html>
